<template>
  <div id="pie" :style="totalsize">
    <div class="dragRectTop"></div>
    <h2 style="text-align:center; ">航班24h分布热力图</h2>
      <e-charts :size="size" :options="options" />
    <div class="dragRectBottom"></div>
  </div>
</template>

<script>
import ECharts from '@/components/ECharts'
      // prettier-ignore
var hours = ['12am', '1am', '2am', '3am', '4am', '5am', '6am', '7am', '8am', '9am', '10am', '11am', '12pm', '1pm', '2pm', '3pm', '4pm', '5pm', '6pm', '7pm', '8pm', '9pm', '10pm', '11pm'];
// prettier-ignore
var days = ['11.30', '12.1', '12.2', '12.3', '12.4', '12.5', '12.6'];
// prettier-ignore
var data = [[0, 0, 0], [0, 1, 0], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 1], [0, 6, 7], [0, 7, 13], [0, 8, 17], [0, 9, 20], [0, 10, 19], [0, 11, 17], [0, 12, 18], [0, 13, 18], [0, 14, 14], [0, 15, 13], [0, 16, 12], [0, 17, 11], [0, 18, 10], [0, 19, 11], [0, 20, 14], [0, 21, 13], [0, 22, 12], [0, 23, 11], [1, 0, 9], [1, 1, 8], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 8], [1, 7, 15], [1, 8, 19], [1, 9, 20], [1, 10, 18], [1, 11, 15], [1, 12, 15], [1, 13, 15], [1, 14, 13], [1, 15, 14], [1, 16, 16], [1, 17, 12], [1, 18, 10], [1, 19, 9], [1, 20, 11], [1, 21, 13], [1, 22, 11], [1, 23, 10], [2, 0, 8], [2, 1, 3], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 1], [2, 6, 8], [2, 7, 16], [2, 8, 19], [2, 9, 21], [2, 10, 20], [2, 11, 18], [2, 12, 18], [2, 13, 19], [2, 14, 13], [2, 15, 11], [2, 16, 11], [2, 17, 13], [2, 18, 12], [2, 19, 12], [2, 20, 12], [2, 21, 14], [2, 22, 14], [2, 23, 11], [3, 0, 8], [3, 1, 4], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 7], [3, 7, 14], [3, 8, 17], [3, 9, 18], [3, 10, 15], [3, 11, 16], [3, 12, 16], [3, 13, 14], [3, 14, 14], [3, 15, 14], [3, 16, 15], [3, 17, 14], [3, 18, 10], [3, 19, 11], [3, 20, 11], [3, 21, 12], [3, 22, 9], [3, 23, 9], [4, 0, 7], [4, 1, 1], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 9], [4, 7, 15], [4, 8, 19], [4, 9, 22], [4, 10, 20], [4, 11, 19], [4, 12, 18], [4, 13, 18], [4, 14, 14], [4, 15, 12], [4, 16, 11], [4, 17, 11], [4, 18, 11], [4, 19, 11], [4, 20, 11], [4, 21, 12], [4, 22, 11], [4, 23, 9], [5, 0, 6], [5, 1, 3], [5, 2, 0], [5, 3, 0], [5, 4, 0], [5, 5, 0], [5, 6, 9], [5, 7, 16], [5, 8, 20], [5, 9, 21], [5, 10, 19], [5, 11, 18], [5, 12, 18], [5, 13, 17], [5, 14, 16], [5, 15, 15], [5, 16, 15], [5, 17, 12], [5, 18, 12], [5, 19, 12], [5, 20, 13], [5, 21, 15], [5, 22, 15], [5, 23, 14], [6, 0, 13], [6, 1, 3], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 1], [6, 6, 9], [6, 7, 17], [6, 8, 19], [6, 9, 21], [6, 10, 20], [6, 11, 20], [6, 12, 20], [6, 13, 19], [6, 14, 15], [6, 15, 14], [6, 16, 13], [6, 17, 12], [6, 18, 12], [6, 19, 11], [6, 20, 14], [6, 21, 15], [6, 22, 14], [6, 23, 12]];
var maxValue = data.reduce(function (max, item) {
  return Math.max(max, item[2]);
}, -Infinity);
export default {
  components: {
    ECharts
  },
  data: function () {
    return{

options : {
  polar: {},
  tooltip: {
          trigger: 'item',
          formatter:function(params) {
        	return params.name + "日" + params.data[1] + "时到" + (params.data[1] + 1) + "时<br>共有航班" + params.data[2] + "架次" 
        }
        },
  visualMap: {
    type: 'continuous',
    min: 0,
    max: maxValue,
    top: 'middle',
    textStyle: {
        color: 'white',
        fontSize : 10
    },
    dimension: 2,
    calculable: true
  },
  angleAxis: {
    type: 'category',
    data: hours,
    boundaryGap: false,
    axisLabel: {
      textStyle: {
        color: 'white',
        fontSize : 12
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: '#ddd',
        type: 'dashed'
      }
    },
    axisLine: {
      show: false
    }
  },
  radiusAxis: {
    type: 'category',
    axisLabel: {
      textStyle: {
        color: 'white',
        fontSize : 12
      }
    },
    data: days,
    z: 100
  },
  series: [
    {
      type: 'custom',
      coordinateSystem: 'polar',
      itemStyle: {
        color: '#d14a61'
      },
      renderItem: function (params, api) {
        var values = [api.value(0), api.value(1)];
        var coord = api.coord(values);
        var size = api.size([1, 1], values);
        return {
          type: 'sector',
          shape: {
            cx: params.coordSys.cx,
            cy: params.coordSys.cy,
            r0: coord[2] - size[0] / 2,
            r: coord[2] + size[0] / 2,
            startAngle: -(coord[3] + size[1] / 2) + 1/8,
            endAngle: -(coord[3] - size[1] / 2) + 1/8
          },
          style: api.style({
            fill: api.visual('color')
          })
        };
      },
      data: data
    }
  ]
},
      size: {
        width: '112%',
        height: '4.8rem'
      },
      totalsize: {
        width: '100%',
        height: '5.5rem'
      }
    }
  }
}
</script>

<style scoped>
#pie {
  /* background-image: url(../assets/line.png); */
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  position: relative;
}

.title {
  text-align: center;
  position: relative;
}

.dragRectTop{
    width: 100%;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0
}

.dragRectTop::before{
    content: "";
    width: 10px;
    height: 10px;
    border-left: 2px solid skyblue;
    border-top: 2px solid skyblue;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
}

.dragRectTop::after{
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid skyblue;
    border-top: 2px solid skyblue;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
}

.dragRectBottom{
    width: 100%;
    height: 10px;
    position: absolute;
    bottom: 0;
    left: 0
}

.dragRectBottom::before{
    content: "";
    width: 10px;
    height: 10px;
    border-left: 2px solid skyblue;
    border-bottom: 2px solid skyblue;
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
}

.dragRectBottom::after{
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid skyblue;
    border-bottom: 2px solid skyblue;
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
}
</style>